<!-- 推广奖励 -->
<template>
	<view class="content">
		<view style="height: 67upx;"></view>
		<view class="column-end top-view">
			<image :src="icon.bg"></image>
			<view @click="toDetail()" style="z-index: 2;">
				<view class="row-div top-view-num">
					<text>{{ data2.promotionCount }}</text>
					<text style="font-size: 34upx;">人</text>
				</view>
				<view class="row-div">
					<text style="font-size: 28upx;font-weight: bold;color: #FFFFFF;">成功邀请好友人数</text>
					<uni-icons type="arrowright" style="font-size: 20upx;" color="#FFFFFF"></uni-icons>
				</view>
			</view>
		</view>
		<view class="column-div card-view">
			<view class="row-div" style="width: 100%;margin-bottom: 44upx;" @click="gotoIncomeDetailPage()">
				<view class="column-div">
					<view class="value-text-one">{{ data2.dayAmount || 0 / 100 }}</view>
					<view class="value-text-tow">昨日贡献值</view>
				</view>
				<view class="division-view"></view>
				<view class="column-div">
					<view class="value-text-one">{{ data2.monthAmount || 0  / 100 }}</view>
					<view class="value-text-tow">今日贡献值</view>
				</view>
				<view class="division-view"></view>
				<view class="column-div">
					<view class="value-text-one">{{ data2.totalAmount || 0  / 100 }}</view>
					<view class="value-text-tow">累计贡献值</view>
				</view>
			</view>
			<view style="font-size: 22upx;font-weight: 500;color: #BFBFBF;">数据更新于{{ timestampToTime(data2.date) }}</view>
		</view>

		<view class="column-div card-img-view">
			<image class="outerBg" src="/static/images/extension/card.png"></image>
			<view class="row-div" style="margin-bottom: 20upx;">
				<image :src="icon.pie" style="width: 40upx;height: 31upx;"></image>
				<view style="font-size: 34upx;font-weight: bold;color: #333333;margin: 0 26upx;">活动规则</view>
				<image :src="icon.pie" style="width: 40upx;height: 31upx;"></image>
			</view>
			<view class="row-start" style="width: 100%;padding-left: 80upx;margin-bottom: 20upx;">
				<image :src="icon.shuoming" style="width: 27upx;height: 27upx;margin-right: 15upx;"></image>
				<view style="font-size: 28upx;font-weight: bold;color: #FE5E49;">如何推广？</view>
			</view>
			<view class="row-start" style="width: 100%;padding-left: 106upx;margin-bottom: 10upx;">
				<view class="dot-view"></view>
				<view style="flex: 1; font-size: 24upx;color: #333333;">点击底部按钮，将链接或图片分享给好友。</view>
			</view>
			<view class="row-start" style="width: 100%;padding-left: 106upx;margin-bottom: 20upx;">
				<view class="dot-view"></view>
				<view style="flex: 1; font-size: 24upx;color: #333333;">分享商品或文章给好友，好友点击打开。</view>
			</view>
			<view class="row-start" style="width: 100%;padding-left: 80upx;margin-bottom: 20upx;">
				<image :src="icon.shuoming" style="width: 27upx;height: 27upx;margin-right: 15upx;"></image>
				<view style="font-size: 28upx;font-weight: bold;color: #FE5E49;">如何才算推广成功？</view>
			</view>
			<view class="row-start" style="width: 100%;padding-left: 106upx;padding-right: 83upx; margin-bottom: 10upx; align-items: flex-start;">
				<view class="dot-view" style="margin-top: 15upx;"></view>
				<view style="flex: 1; font-size: 24upx;color: #333333;">新用户首次打开您分享的链接，并注册成功，则记录您为该用户的永久推广人，得到贡献值奖励。</view>
			</view>
			<view class="border-view"></view>
			<image class="ER-code" :src="'data:image/png;base64,' + data2.qrImg"></image>
		</view>
		<view style="height: 170upx;"></view>
		<view class="row-between but-view ">
			<view class="row-div link-but" @click="share('0')">
				<image src="../../static/assets/fenxiang.png" style="width: 31upx; height:31upx"></image>
				<view class="but-text">分享链接推广</view>
			</view>
			<view class="row-div image-but" @click="share('1')">
				<image src="/static/assets/baocun.png" style="width: 26upx; height: 30upx;"></image>
				<view class="but-text">保存推广图片</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		base64ToPath
	} from '@/js_sdk/image-tools/index.js';
	export default {
		components: {},
		data() {
			return {
				icon: {
					bg: '/static/images/extension/bg.png',
					pie: '/static/images/extension/pie.png',
					shuoming: '/static/images/extension/shuoming.png',
					btn1: '/static/images/extension/button1.png',
					btn2: '/static/images/extension/button2.png',
					bottom: '/static/images/extension/bottom.png'
				},
				qr: '',
				data2: {},
				path: '',
				nick_name: ''
			};
		},
		computed: {
			...mapState(['imgSite', 'url'])
		},
		onLoad(options) {
			let that = this;
			this.$api.showLoading()
			that.$api.globalUtil.requestAjax({
				url: '/CustomerApi/userPromoteIncomeStatisticsApi',
				method: 'POST',
				success: function(res) {
					that.data2 = res.data.response;
				},
				complate: () => this.$api.hideLoading()
			});
		},
		methods: {

			//goto收益明细
			gotoIncomeDetailPage() {
				// uni.navigateTo({
				// 	url: 'incomeDetail'
				// });
			},


			// 分享
			share(e) {
				let that = this;
console.log('share-----that.url', that.url)
				//用户信息
				var customerId = "";
				const tokenInfo = uni.getStorageSync('tokenInfo');
				if (tokenInfo) {
					console.log(JSON.parse(tokenInfo));
					that.nick_name = JSON.parse(tokenInfo).nickName;
					customerId = JSON.parse(tokenInfo).customerId;
				} else {
					that.nick_name = "";
					customerId = "";
				}

				// #ifndef APP-PLUS
				if (e == '0') {
					uni.setClipboardData({
						data: encodeURI(that.url + '#/pagesAccount/extension/invitation?nick_name=' + that.nick_name + '&id=' +
							customerId),
						success: function(data) {
							uni.showToast({
								title: '您的专属推广链接已复制到您的粘贴板',
								icon: 'none'
							});
						},
						fail: function(err) {},
						complete: function(res) {}
					});
				} else if (e == '1') {

					// #ifdef H5
					//保存图片处理方法
					that.saveImageToPhotosAlbumHandler();
					// #endif

					// #ifdef MP-WEIXIN
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							//保存图片处理方法
							that.saveImageToPhotosAlbumHandler();
						}
					});
					// #endif
				}
				// #endif


				// #ifdef APP-PLUS
				if (e == '0') {
					console.log('APP-PLUS-----that.url', that.url)
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneSession',
						type: 0,
						href: encodeURI(that.url + '#/pagesAccount/extension/invitation?nick_name=' + that.nick_name + '&id=' +
							customerId), //同级invitation链接地址，
						title: '构购',
						summary: '您的好友邀请您使用构购',
						imageUrl: that.imgSite + '/s/20210125/37jodmjvvwuk.png', //logo图片地址
						success: function(res) {
							that.$refs['showpopup'].close();
						},
						fail: function(err) {
							that.$refs['showpopup'].close();
						}
					});
				} else if (e == '1') {

					//保存图片处理方法
					that.saveImageToPhotosAlbumHandler();
				}
				// #endif
			},


			// 保存图片处理方法
			saveImageToPhotosAlbumHandler() {

				var that = this;
				base64ToPath('data:image/png;base64,' + this.data2.qrImg)
					.then(base64 => {
						uni.saveImageToPhotosAlbum({
							filePath: base64,
							success: function() {
								that.downing = false;
								uni.showToast({
									title: "保存成功",
									icon: "none",
									duration:2000
								});
							},
							fail: function() {
								uni.showToast({
									title: "保存失败，请稍后重试",
									icon: "none",
									duration:2000
								});
							}
						});
					})
					.catch(error => {
						console.error(error)
					});
			},


			// 时间戳转换日期--补0--毫秒
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
				var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			},
			// 推广明细
			toDetail() {
				uni.navigateTo({
					url: '/pages/user/myFriends/myFriends'
				});
			}
		}
	};
</script>

<style lang="less">
	.content {
		background: linear-gradient(0deg, #FF1C00 0%, #FF8A00 100%);
	}

	.top-view {
		width: 100%;
		height: 469upx;
		position: relative;
		padding-bottom: 110upx;

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.top-view-num {
			font-size: 70upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-shadow: 0px 2upx 3upx rgba(230, 66, 46, 0.3);
			margin-bottom: 24upx;
			align-items: baseline;
		}
	}

	.card-view {
		width: calc(100% - 60upx);
		margin: auto;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding-top: 56upx;
		padding-bottom: 27upx;
		margin-bottom: 26upx;

		.value-text-one {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 28upx;
		}

		.value-text-tow {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.division-view {
			width: 1upx;
			height: 56upx;
			background: rgba(210, 23, 40, 0.3);
			margin: 0 57upx;
		}
	}

	.card-img-view {
		width: calc(100% - 60upx);
		margin: auto;
		padding-top: 45upx;
		padding-bottom: 65upx;
		border-radius: 15upx;
		position: relative;

		.outerBg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.dot-view {
			width: 6upx;
			height: 6upx;
			background: #FE5E49;
			border-radius: 50%;
			margin-right: 11upx;
		}

		.border-view {
			width: calc(100% - 120upx);
			margin: 54upx auto;
			height: 1px;
			border-bottom: 1px dashed #D21728;
		}

		.ER-code {
			width: 369upx;
			height: 369upx;
			z-index: 2;
		}

		view {
			z-index: 2;
		}
	}

	.but-view {
		width: 100%;
		background: #FFFFFF;
		padding: 34upx 24upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		.but-text{
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			margin-left: 10upx;
		}
		.link-but{
			width: calc(100% / 2 - 10upx);
			height: 80upx;
			background: linear-gradient(0deg, #FF6029 0%, #FFA759 100%);
		}
		.image-but{
			width: calc(100% / 2 - 10upx);
			height: 80upx;
			background: linear-gradient(0deg, #FFA200 0%, #F5C673 100%);
		}
	}

	.top {
		position: relative;
		width: 100%;
		color: #fff;
		font-weight: bold;
		width: 100%;
		height: 469upx;

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 469upx;
		}

		.person {
			text-align: center;
			width: 100%;

			.num {
				font-size: 34rpx;

				text {
					font-size: 70rpx;
				}
			}

			.detail {
				font-size: 28rpx;
			}
		}
	}

	.datas {
		width: 690rpx;
		height: 228rpx;
		border-radius: 15rpx;
		margin: -98rpx auto 0 auto;
		background-color: white;
		position: relative;
		z-index: 10;

		.data {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 135rpx;
			padding-top: 56rpx;

			.block {
				width: 33%;
				text-align: center;

				.num {
					color: #333333;
					font-size: 36rpx;
					font-weight: bold;
				}

				.name {
					color: #333333;
					font-size: 24rpx;
				}
			}

			.shu {
				width: 2rpx;
				height: 56rpx;
				background: rgba(210, 23, 40, 0.3);
			}
		}

		.time {
			width: 100%;
			color: #bfbfbf;
			font-size: 22rpx;
			text-align: center;
			margin-top: 44rpx;
		}
	}

	.card {
		position: relative;
		width: 690rpx;
		height: 914rpx;
		background-size: cover;
		margin: 26rpx auto 0 auto;
		padding-top: 46rpx;

		.outerBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.title {
			position: relative;
			width: 100%;
			align-items: center;
			color: #333333;
			font-size: 34rpx;
			font-weight: bold;

			image {
				width: 40rpx;
				height: 31rpx;
				margin: 0 26rpx 0 26rpx;
			}
		}

		.shuoming {
			position: relative;
			display: flex;
			margin-top: 46rpx;

			.icon {
				width: 122rpx;
				margin-top: -6rpx;

				image {
					width: 27rpx;
					height: 26rpx;
					margin-left: 80rpx;
				}
			}

			.detail {
				.question {
					color: #d21728;
					font-size: 28rpx;
					font-weight: bold;
				}

				.msg {
					color: #333333;
					font-size: 24rpx;
					margin-top: 24rpx;
					width: 550rpx;
				}
			}
		}

		.xuxian {
			position: relative;
			width: 531rpx;
			height: 1rpx;
			margin: 50rpx auto 0 auto;
			background-image: linear-gradient(to right, #d21728 0%, #d21728 50%, transparent 50%);
			background-size: 8px 1px;
			background-repeat: repeat-x;
		}

		.ER-code {
			position: relative;
			width: 369rpx;
			height: 369rpx;
			margin: 43rpx 0 0 160rpx;
		}
	}

	.bottom {
		position: relative;
		background-size: cover;
		width: 100%;
		height: 370rpx;
		margin-top: 50rpx;
		padding-top: 194rpx;

		.bottomBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%s;
		}

		.btn1,
		.btn2 {
			position: relative;
			width: 320rpx;
			height: 82rpx;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			view {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				line-height: 82rpx;
				text-align: center;
				font-weight: bold;
				font-size: 28rpx;
				color: white;
			}
		}

		.btn2 {
			position: relative;
			z-index: 99;
			width: 320rpx;
			height: 82rpx;
			color: white;
			font-size: 28rpx;
			font-weight: bold;
		}
	}


	.moreDetail {
		display: inline-block;
		margin-left: 8rpx;
	}
</style>
